<div class="row">
    <div class="col-md-12 active-filters">
        <h4>Filters</h4>
        <form class="form-horizontal" name="filtersForm" ng-submit="$vm.filter(filtersForm);" novalidate>

            <div class="row">
                <div class="col-md-12">
                    <div class="form-group mb-0">
                        <label class="col-sm-2 control-label">Keyword</label>
                        <div class="col-sm-10">
                            <input class="form-control" ng-model="$vm.uiSrv.activeFilters.keyword.value" placeholder="ex: freetext"></input>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="col-sm-10 col-sm-offset-2">
                        <hr class="filter-separator" />
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Status</label>
                        <div class="col-sm-8">
                            <tags-input class="form-control form-control-wrapper"
                                min-length="2"
                                ng-model="$vm.uiSrv.activeFilters.status.value"
                                placeholder="ex: Open, Resolved"
                                replace-spaces-with-dashes="false"
                                add-from-autocomplete-only="true">
                                    <auto-complete load-on-focus="true" load-on-down-arrow="true" min-length="1" source="$vm.getStatuses($query)"></auto-complete>
                                </tags-input>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Tags</label>
                        <div class="col-sm-8">
                            <tags-input class="form-control form-control-wrapper"
                                min-length="2"
                                ng-model="$vm.uiSrv.activeFilters.tags.value"
                                placeholder="ex: misp, malspam, ioc"
                                replace-spaces-with-dashes="false">
                                    <auto-complete debounceDelay="400" source="$vm.getTags($query)"></auto-complete>
                                </tags-input>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Assignee</label>
                        <div class="col-sm-8">
                            <tags-input class="form-control form-control-wrapper"
                                min-length="2"
                                ng-model="$vm.uiSrv.activeFilters.owner.value"
                                placeholder="ex: Firstname Lastname"
                                replace-spaces-with-dashes="false"
                                add-from-autocomplete-only="true"
                                display-property="label">
                                    <auto-complete debounceDelay="400" source="$vm.getUsers($query)" display-property="label"></auto-complete>
                                </tags-input>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Severity</label>
                        <div class="col-sm-8">
                            <tags-input class="form-control form-control-wrapper"
                                min-length="2"
                                ng-model="$vm.uiSrv.activeFilters.severity.value"
                                placeholder="ex: High, Medium, Low"
                                replace-spaces-with-dashes="false"
                                add-from-autocomplete-only="true">
                                    <auto-complete load-on-focus="true" load-on-down-arrow="true" min-length="1" source="$vm.getSeverities($query)"></auto-complete>
                                </tags-input>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Title</label>
                        <div class="col-sm-8">
                            <input class="form-control" ng-model="$vm.uiSrv.activeFilters.title.value" placeholder="ex: freetext"></input>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">Date</label>
                        <div class="col-sm-8">                            
                            <div class="row">
                                <div class="col-sm-6">
                                    <dt-picker date="$vm.uiSrv.activeFilters.startDate.value.from" placeholder="from"></dt-picker>
                                </div>
                                <div class="col-sm-6">
                                    <dt-picker date="$vm.uiSrv.activeFilters.startDate.value.to" placeholder="to"></dt-picker>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pull-right">
                <button class="btn btn-sm btn-primary" type="submit">Apply filters</button>
            </div>
        </form>

    </div>
</div>
